import React from 'react'
import PropTypes from 'prop-types'
import { connect, mapState, mapActions } from '../@react/ReactStore'

const Counter = ({ count, count10, count5, increment, decrement, reset, play, stop }) => {
  return (
    <div>
      <span>Counter: {count}</span>
      <button style={{margin: '0 10px'}} onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
      <button style={{margin: '0 10px'}} onClick={reset}>重置</button>
      <button onClick={play}>播放</button>
      <button style={{margin: '0 10px'}} onClick={stop}>停止</button>
      <p>10倍Counter  {count10}</p>
      <p>5倍Counter  {count5}</p>
    </div>
  )
}

Counter.propTypes = {
  count10: PropTypes.number,
  count: PropTypes.number,
  increment: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired,
}

export default connect(
  mapState({
    count: 'count',
    count10: 'selector.count10',
    count5: 'selector.count.count5'
  }),
  mapActions({
    increment: 'count/increment',
    decrement: 'count/decrement',
    reset: 'count/reset',
    play: 'count/play',
    stop: 'count/stop'
  })
)(Counter)
